<script setup>
import { ref, onMounted } from 'vue'
import { generateCaptcha } from '@/utils/captcha'

// 验证码相关
const captchaCanvas = ref(null)
const inputCaptcha = ref('')
const verifyResult = ref('')

// 生成验证码
const refreshCaptcha = () => {
  if (captchaCanvas.value) {
    generateCaptcha(captchaCanvas.value)
  }
}

// 验证验证码
const verifyCaptcha = () => {
  if (!inputCaptcha.value) {
    verifyResult.value = '请输入验证码'
    return
  }
  
  // 这里应该与后端验证，这里只是示例
  verifyResult.value = '验证成功'
  inputCaptcha.value = ''
  refreshCaptcha()
}

onMounted(() => {
  refreshCaptcha()
})
</script>

<template>
  <div class="captcha-container">
    <canvas ref="captchaCanvas" width="150" height="50" @click="refreshCaptcha"></canvas>
    <p class="hint">点击图片刷新验证码</p>
    
    <div class="input-group">
      <input 
        v-model="inputCaptcha" 
        type="text" 
        placeholder="请输入验证码"
        @keyup.enter="verifyCaptcha"
      >
      <button @click="verifyCaptcha">验证</button>
    </div>
    
    <p :class="['result', verifyResult === '验证成功' ? 'success' : 'error']">
      {{ verifyResult }}
    </p>
  </div>
</template>

<style scoped>
.captcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

canvas {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.hint {
  color: #666;
  font-size: 14px;
}

.input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  width: 120px;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

button:hover {
  background-color: #45a049;
}

.result {
  font-size: 14px;
  margin: 0;
  min-height: 20px;
}

.success {
  color: #4CAF50;
}

.error {
  color: #f44336;
}
</style>


